<template>
  <div class="bm-swipe-one">
    <div class="wrapper">
      <div class="header">
        <div class="title">斑马爱家数据总览(用户数据)</div>
      </div>
      <div class="mxb-nav">
        <div class="nav-item">
          <span class="mxb-nav-text">总注册人数</span>
          <span
            class="mxb-nav-num"
            id="totalRegisterNum"
          >{{total.registerCount}}</span>
        </div>
        <div class="nav-item">
          <span class="mxb-nav-text">总实名人数</span>
          <span
            class="mxb-nav-num"
            id="totalRealnameNum"
          >{{total.RealAuthenticationCount}}</span>
        </div>
        <div class="nav-item">
          <span class="mxb-nav-text">总交易人数</span>
          <span
            class="mxb-nav-num"
            id="exchangeNum"
          >{{total.sellCount}}</span>
        </div>
        <div class="nav-item">
          <span class="mxb-nav-text">今日注册人数</span>
          <span
            class="mxb-nav-num"
            id="todayRegisterNum"
          >{{todayObj.registerCount}}</span>
        </div>
        <div class="nav-item">
          <span class="mxb-nav-text">今日实名人数</span>
          <span
            class="mxb-nav-num"
            id="todayRealnameNum"
          >{{todayObj.realCount}}</span>
        </div>
        <div class="nav-item">
          <span class="mxb-nav-text">今日登陆人数</span>
          <span
            class="mxb-nav-num"
            id="todayLoginNum"
          >{{todayObj.loginCount}}</span>
        </div>
      </div>
      <div class="wrapper-content">
        <div class="content-item p-set1">
          <div class="wrapper-height">
            <div
              class="content-item-wrapper"
              id="userDeInData"
            >
              <user-de-in :clientHeight="clientHeight" :clientWidth="clientWidth"></user-de-in>
            </div>
          </div>
        </div>
        <div class="content-item p-set2">
          <div class="mxb-exchange">
            <div class="mxb-exchange-data">
              <exchange
                pWidth="2.34rem"
                pHeight="1.05rem"
                :oneValue="String(total.firstBuyAgainCount)"
                :twoValue="String(total.historyBuyAgainCount)"
                oneName="首次购买人数"
                twoName="复购人数"
                mxbId="exchangeOne"
                v-if="flag"
              ></exchange>
            </div>
            <div class="mxb-exchange-desc">
              <div class="item">
                <span class="item-icon"></span>
                <span
                  class="item-num"
                  id="totalExchange"
                >交易人数：{{total.sellCount}}(人)</span>
              </div>
              <div class="item">
                <span
                  class="item-num"
                  id="firstExchange"
                >首次交易人数：{{total.firstBuyAgainCount}}(人)</span>
              </div>
              <div class="item">
                <span
                  class="item-num"
                  id="againExchange"
                >复购人数：{{total.historyBuyAgainCount}}(人)</span>
              </div>
            </div>
          </div>
          <div class="mxb-activity">
            <div class="mxb-activity-data">
              <active-data :clientHeight="clientHeight" :clientWidth="clientWidth"></active-data>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import userDeIn from 'src/component/userDeIn'
import exchange from 'src/component/exchange'
import activeData from 'src/component/activeData'
import {getToadyUserData} from 'src/api/api'
export default {
  components: {
    userDeIn,
    exchange,
    activeData
  },
  props: {
    total: {
      type: Object,
      default: () => {}
    },
    clientHeight: {
      type: String,
      default: ''
    },
    clientWidth: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      todayObj: {
        registerCount: '--',
        realCount: '--',
        loginCount: '--'
      },
      flag: false
    }
  },
  created() {
    this._getToadyUserData()
    setInterval(() => {
      setTimeout(() => {
        this._getToadyUserData()
      }, 0)
    }, 5 * 60 * 1000)
  },
  methods: {
    _getToadyUserData() {
      getToadyUserData().then(res => {
        if (res.status === '0') {
          this.todayObj = res.result
          this.flag = true
        }
      })
    }
  }
}
</script>

<style>
</style>
